<template>
  <div class="article-ranking">
    <el-card class="checkbox-container">
      <el-checkbox-group v-model="selectLabel">
        <el-checkbox
          :label="item"
          v-for="item in labelList"
          :key="item"
        ></el-checkbox>
      </el-checkbox-group>
    </el-card>
    <el-card class="table-container">
      <el-table :data="tableList" border style="width: 100%" ref="tableRef">
        <el-table-column
          v-for="item in tableColumnList"
          :label="item.label"
          :prop="item.prop"
          :key="item.label"
          :formatter="item.formatter"
        >
          <template v-slot="{ row }" v-if="item.label === '发布时间'">
            {{ $filter.relativeTime(row.publicDate) }}
          </template>
          <template v-slot="{ row }" v-else-if="item.label === '操作'">
            <el-button type="primary" size="mini" @click="handleScan(row)"
              >查看</el-button
            >
            <el-button type="danger" size="mini" @click="handleRemove(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
        <!-- <el-table-column label="排名" prop="ranking"></el-table-column>
        <el-table-column label="标题" prop="title"></el-table-column>
        <el-table-column label="作者" prop="author"></el-table-column>
        <el-table-column label="发布时间" prop="publicDate">
          <template v-slot="{ row }">
            {{ $filter.relativeTime(row.publicDate) }}
          </template>
        </el-table-column>
        <el-table-column label="内容简介" prop="desc"></el-table-column>
        <el-table-column label="操作" prop="ranking" :width="200">
          <template v-slot="{ row }">
            <el-button type="primary" size="mini" @click="handleScan(row)">查看</el-button>
            <el-button type="danger" size="mini" @click="handleRemove(row)"
              >删除</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
      <el-pagination
        class="pagination-wrapper"
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="page"
        :page-size="size"
        :page-sizes="[2, 10, 20, 50, 100]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
      />
    </el-card>
  </div>
</template>

<script setup>
import { ref, onActivated, onMounted } from 'vue'
import { getArticleList, deleteArticle } from '@/api/article'
import { tableColumnList, labelList, selectLabel } from './dynamicData'
import { tableRef, initSortable } from './sortable'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const page = ref(1)
const size = ref(10)
const total = ref(0)
const tableList = ref([])
const articleList = async () => {
  const info = await getArticleList({
    page: page.value,
    size: size.value
  })
  page.value = info.page
  size.value = info.size
  total.value = info.total
  tableList.value = info.list
}

articleList()
const sizeChange = (currentSize) => {
  size.value = currentSize
  articleList()
}

const currentChange = (currentPage) => {
  page.value = currentPage
  articleList()
}
onActivated(() => {
  articleList()
})

onMounted(() => {
  initSortable(tableList, articleList)
})
const router = useRouter()
// 查看
const handleScan = (row) => {
  router.push(`/article/${row._id}`)
}
// 删除
const handleRemove = (row) => {
  ElMessageBox.confirm('确认删除当前文章吗？', {
    title: '提示',
    cancelButtonText: '取消',
    confirmButtonText: '确定'
  }).then(() => {
    deleteArticle(row._id)
    ElMessage.success('删除成功')
    articleList()
  })
}
</script>

<style lang="scss" scoped>
.article-ranking {
  .checkbox-container {
    margin-bottom: 20px;
  }
  .table-container {
    text-align: center;
    .pagination-wrapper {
      margin: 20px 0 0 0;
      display: inline-block;
    }
  }
}
::v-deep .ghost-item {
  background-color: #304156;
  color: #fff;
}
</style>
